﻿@inherits DemoWithResizableComponent

<div class="demo-description" id="ResizeModes">
    <h2><DemoNavLink Link="Memo#ResizeModes" />Memo - Resize Modes</h2>
    <p>
        <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxMemo">Memo</a> supports different resize modes that are specified by the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxMemo.ResizeMode">ResizeMode</a> property:
    </p>
    <ul>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.MemoResizeMode">Vertical</a> (Default) - Users can only change the component height.</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.MemoResizeMode">Horizontal</a> - Users can only change the component width.</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.MemoResizeMode">VerticalAndHorizontal</a> - Users can change both the component height and width.</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.MemoResizeMode">Disabled</a> - Users are not allowed to resize the component.</li>
    </ul>
    <p>
        To apply different resize modes, use the <b>Resize Mode</b> drop-down list in the demo code snippet.
    </p>
</div>

<div class="card demo-card demo-card-shadow">
    <div class="card-header">
        <DemoToolbar @bind-SelectedSize="SizeMode" Title="Resize the component to see all the text" />
    </div>
    <div class="card-body">
        <DxMemo @key="@ForceRerender()" 
                @bind-Text="TextValue"
                SizeMode="SizeMode"
                ResizeMode="MemoResizeMode"
                CssClass="memo-max-width"
                Columns="66"></DxMemo>
    </div>
</div>

<div class="code-snippet card demo-card-wide">
    <CodeSnippetHeader DocLink="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxMemo#resize-modes"/>
    <div class="card-footer text-muted">
        <div style="margin: 1em 0 -1em .5em;">
            <label class="d-inline-flex flex-nowrap align-items-center">
                <b class="hljs-attr" style="white-space: nowrap; margin-right: .5em;">Resize Mode: </b>
                <DxComboBox Data="@(Enum.GetNames(typeof(MemoResizeMode)))"
                            Value="@(MemoResizeMode.ToString())"
                            ValueChanged="@((string selectedItem) => { MemoResizeMode = Enum.Parse<MemoResizeMode>(selectedItem); })">
                </DxComboBox>
            </label>
        </div>
        <CodeSnippet_Editor_Memo_ResizeMode />
    </div>
</div>

@code {
    public object ForceRerender() => new object(); // this fixes a bug in chrome layout.
    MemoResizeMode MemoResizeMode { get; set; } = MemoResizeMode.VerticalAndHorizontal;

    string TextValue { get; set; } = "Prepare 2020 Marketing Plan: We need to double revenues in 2020 and our marketing strategy is going to be key here. " +
            "R&D is improving existing products and creating new products so we can deliver great AV equipment to our customers. " +
            "Robert, please make certain to create a PowerPoint presentation for the members of the executive team.";
}
